<template>
  <div class="row page variety-page">
    <div v-for="(item, index) in variety" :key="index" class="variety-item" @click="linkToPage(item.link)" >
      <img class="variety-cover" :src="item.cover"/>
      <div class="variety-title">{{item.title}}</div>
    </div>
  </div>
</template>

<script>
import variety from '../data/variety'
export default {
  name: 'variety',
  data() {
    return {
      variety: variety
    }
  },
  methods: {
    linkToPage(url) {
      window.open(url)
    }
  }
}
</script>
  
<style>
  .variety-page {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
  }
  .variety-item {
    margin-right: 22px;
    width: 300px;
    margin-bottom: 22px;
  }
  .variety-item img {
    width: 300px;
  }
  .variety-title {
    font-size: 16px;
    margin-top: 6px;
  }
  @media screen and (max-width: 768px) {
    .variety-item {
      width: 88%;
      margin-right: 0;
      margin-bottom: 30px;
    }
    .variety-item img {
      width: 100%;
      height: auto;
    }
  }
</style>

